import React, { PureComponent } from 'react';
import DropOption from 'components/DropOption';
import moment from 'moment';
import {
  Table,
  Card,
  Button,
  Modal
} from 'antd';
const { confirm } = Modal;

/* eslint react/no-multi-comp:0 */
class TableList extends PureComponent {
  handleMenuClick = (record, e) => {
    const { onDeleteItem, onEditItem } = this.props;

    if (e.key === '1') {
      onEditItem(record);
    } else if (e.key === '2') {
      confirm({
        title: `确认删除该用户吗?`,
        onOk() {
          onDeleteItem(record.id);
        },
      });
    }
  };

  render() {
    const { onDeleteItem, onEditItem, onAdd, ...tableProps } = this.props;

    let columns = [
      { title: 'ID号', dataIndex: 'id', width: 100, render: val => <span>{`88${val}`}</span> },
      { title: '用户名', dataIndex: 'username' },
      { title: '昵称', dataIndex: 'nickname' },
      { title: '角色', dataIndex: 'role_name' },
      { title: '邮箱', dataIndex: 'email' },
      { title: '添加时间', dataIndex: 'create_time', render: val => <span>{moment.unix(val).format('YYYY-MM-DD HH:mm')}</span> },
      { title: '上次登录IP', dataIndex: 'last_ip', render: val => <span>{val || '未登录'}</span>},
      { title: '上次登录时间', dataIndex: 'last_time', render: val => <span>{val ? moment.unix(val).format('YYYY-MM-DD HH:mm') : '未登录'}</span>},
      {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 100,
        render: (text, record) => {
          let menuOptions = [{ key: '1', name: '编辑' }, { key: '2', name: '删除' }];
          return (
            <DropOption
              onMenuClick={e => this.handleMenuClick(record, e)}
              menuOptions={menuOptions}
            />
          );
        },
      },
    ];

    return (
      <Card bordered={false} title="管理员列表" extra={
      <Button icon="plus" type="primary" onClick={onAdd}>
      新建
    </Button>
  }>
    <Table
          {...tableProps}
          pagination={{
            ...tableProps.pagination,
            showTotal: total => `共 ${total} 条结果`,
          }}
          size={'middle'}
          columns={columns}
          rowKey={record => record.id}
        />
    </Card>
        
    );
  }
}

export default TableList;
